import React from 'react'

// import fetchJSONP from 'fetch-jsonp'

import { Spin, Alert } from 'antd'
import { Pagination } from 'antd';


import MovieItem from '../components/MovieItem'

import in_theaters from './test_data/in_theaters.js'
import coming_soon from './test_data/coming_soon.js'
import top250  from './test_data/top250.js'
// import { log } from 'util';

export default class MovieList extends React.Component{
    constructor(props){
        super(props)
        this.state={
            movies: [], // 电影列表
            nowPage: parseInt(props.match.params.page) || 1, // 当前展示第几页的数据
            pageSize: 20, // 每页显示多少条数据
            total: 0, // 当前电影分类下，总共有多少条数据
            isloading: true, // 数据是否正在加载， 如果为 true，表示正在加载数据
            movieType: props.match.params.type // 保存一下 要获取的电影的类型
        }
    }

//地址变化的时候重置参数项
 
        componentWillReceiveProps(nextProps) {                                  
            this.setState ({
                isloading: true,
                nowPage: parseInt(nextProps.match.params.page),
                movieType: nextProps.match.params.type 
            },function(){
                this.loadMovieListByTypeAndPage()
            })
        
    }

    
    render(){
        return <div>
            {/* <h1>content{JSON.stringify(this.props.match.params)}</h1> */}
            {this.renderList()}
        </div>
    }



    componentDidMount() { 
        this.loadMovieListByTypeAndPage()
    }

    
    

    loadMovieListByTypeAndPage=()=>{

        // const start = this.state.pageSize * (this.state.nowPage - 1)

        // const url = 'https://douban.uieee.com/v2/movie/'+this.state.movieType+'?start='+start+'&count='+this.state.pageSize
        
        // console.log(url)
        // fetchJSONP(url)
        // .then(response => response.json())
        // .then(data=>{
        //     this.setState({
        //         isloading: false, 
        //         movies :data.subjects,
        //         total: data.total
        //     })
          
        // })
        if(this.state.movieType =='in_theaters'){
            setTimeout(() => {
                this.setState({
                  isloading: false, // 将 loading 效果隐藏
                  movies: in_theaters.subjects, // 为电影列表重新赋值
                  total: in_theaters.total // 把总条数，保存到 state 上
                })
              }, 500)
        }else if(this.state.movieType =='coming_soon'){
            setTimeout(() => {
                this.setState({
                  isloading: false, // 将 loading 效果隐藏
                  movies: coming_soon.subjects, // 为电影列表重新赋值
                  total: coming_soon.total // 把总条数，保存到 state 上
                })
              }, 500)
        }else {
            setTimeout(() => {
                this.setState({
                  isloading: false, // 将 loading 效果隐藏
                  movies: top250.subjects, // 为电影列表重新赋值
                  total: top250.total // 把总条数，保存到 state 上
                })
              }, 500)
        }
       
        
        // console.log(this.state.movieType);
    }

    renderList = ()=>{
        if(this.state.isloading == true){
            return <Spin tip="Loading..." >
            <Alert style={{textAlign:'center'}}
              message=""
              description="正在加载中..."
              type="info"
            />
          </Spin>
        }
        else
        {
            return <div> <div style={{background : '#fff',display:'flex',flexWrap:'wrap'}}>
                {this.state.movies.map(item=> {
                    return <div key={item.id}>
                        <MovieItem  {...item} history = {this.props.history}></MovieItem>
                    </div>
                })}
                <Pagination defaultCurrent={this.state.nowPage} pageSize = {this.state.pageSize} 
                total={this.state.total}  onChange ={this.pageChanged} style ={{padding :'5px'}}/>
            </div>
        </div>
        }
    }

    pageChanged = (page)=>{
    //    window.location.href = 'http://localhost:8080/#/movie/'+this.state.movieType+'/'+page 
          this.props.history.push('/movie/'+this.state.movieType+'/'+page)
    }
}